<template>
  <div class="radioList">
    <div class="left">
      <h2>推荐节目</h2>
      <ul>
        <li v-for="item in programRecommend" :key="item.id">
          <div class="li_left">
            <div class="img">
              <GlobalImageDeep
                :url="item.coverUrl"
                :imgWidth="80"
                :imgHeight="80"
              />
              <!-- 播放按钮 -->
              <GlobalPlayMask :maskWidth="40" :maskHeight="40" />
            </div>

            <div class="info one_txt_cut">
              <span :title="item.name">{{ item.name }}</span>
              <p :title="item.radio.name">{{ item.radio.name }}</p>
            </div>
          </div>
          <div class="li_right">
            <span :title="item.radio.category"> {{ item.radio.category }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="right">
      <h2>节目排行榜</h2>
      <ul>
        <li v-for="item in toplist" :key="item.program.id">
          <div class="li_left">
            <div class="img">
              <GlobalImageDeep
                :url="item.program.coverUrl"
                :imgWidth="80"
                :imgHeight="80"
              />
              <!-- 播放按钮 -->
              <GlobalPlayMask :maskWidth="40" :maskHeight="40" />
            </div>

            <div class="info one_txt_cut">
              <span :title="item.program.name">{{ item.program.name }}</span>
              <p :title="item.program.radio.name">
                {{ item.program.radio.name }}
              </p>
            </div>
          </div>
          <div class="li_right">
            <span :title="item.program.radio.category">
              {{ item.program.radio.category }}</span
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getProgramRecommend,
  getProgramList,
} from "../../../../../api/radioApi";
export default {
  name: "radioList",
  components: {},
  data() {
    return {
      programRecommend: [],
      toplist: [],
    };
  },
  created() {
    this.getProgramRecommend();
    this.getProgramList();
  },
  methods: {
    async getProgramRecommend() {
      try {
        let result = await getProgramRecommend();
        if (result.code === 200) {
          this.programRecommend = result.programs;
        }
      } catch (error) {}
    },
    async getProgramList() {
      let result = await getProgramList({ limit: 10 });
      if (result.code === 200) {
        this.toplist = result.toplist;
      }
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.radioList {
  padding: 30px 0;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    width: 570px;
    // height: 800px;
    > h2 {
      font-weight: normal;
      padding-bottom: 10px;
      border-bottom: 1px solid @globalColor;
      margin-bottom: 10px;
    }
    ul li {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .li_left {
        .img {
          position: relative;
          &:hover {
            /deep/ .playMask .play {
              display: block;
              cursor: pointer;
            }
          }
        }
        display: flex;
        align-items: center;
        .info {
          flex: 1;
          padding-left: 20px;
          p {
            color: #999999;
            margin-top: 8px;
            &:hover {
              cursor: pointer;
              color: @globalColor;
            }
          }
          span {
            &:hover {
              cursor: pointer;
              color: @globalColor;
            }
          }
        }
        width: 440px;
        /deep/ .el-image img {
          border-radius: 8px;
        }
      }
      .li_right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        span {
          color: #999999;
          font-size: 12px;
          border: 1px solid #999999;
          padding: 2px 5px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
